Ampliar imágenes al pasar el cursor

Colores

A continuación os dejo una idea facilitada por Cesar, como podéis ver el resultado es muy bueno, basta pasar el ratón para ver las imágenes en mayor tamaño sin necesidad de clicar en ellas.

Conseguir ese efecto es muy fácil...

Nos situamos en Plantilla/ Edición de HTML y justo antes de ]]></b:skin> aplicamos el siguiente código:

.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*Estilos del borde y texto*/
position: absolute;
background-color: white;
padding: 5px;
left: -100px;
border: 1px dashed gray;
visibility: hidden;
color: #FFFF00;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 10px; /*position where enlarged image should offset horizontally */
}

Una vez añadido el código en la plantilla queda añadir el siguiente justo donde deseamos que salgan la imagen.

Aquí es donde podéis configurar la posición de la imagen que se amplía, el color de fondo, el tipo de texto, etc.

<a class="thumbnail" href="#thumb"><img src="aquí-la-url-de-la-imagen" width="100px" height="100px" border="0" /><span><img src="aquí-la-url-de-la-imagen"/><br />Texto si se desea poner</span></a>

Lo que está en negrita es la Url de la imagen que debéis sustituir por la vuestra.
En width y height podéis cambiar el valor del tamaño.